<!DOCTYPE html>
<html>

<head>
	<title> ZTREE DEMO - big data common</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<style>
		.t-body {
			width: 70%;
			margin: 20px auto;
		}

		.checkboxBtn {
			margin-left: 20px;
			margin-right: 5px;
		}
	</style>
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
	<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.exhide.js"></script> -->
	<script type="text/javascript" src="../../js/fuzzysearch.js"></script>
	<script type="text/javascript" src="../../mock/big-tree.js"></script>

	<script type="text/javascript">
		var IDMark_A = "_a";
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			view: {
				showIcon: false,
				fontCss: {
					color: "#555"
				},
				addDiyDom: addDiyDom
			},
			callback: {
				onNodeCreated: onNodeCreated
			}
		};

		function addDiyDom(treeId, treeNode) {
			var aObj = $("#" + treeNode.tId + IDMark_A);
			var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" + treeNode.id + "' onfocus='this.blur();'></input>";
			aObj.before(editStr);
		}

		var dataMaker = function (count) {
			var nodes = [], pId = -1,
				min = 10, max = 90, level = 0, curLevel = [], prevLevel = [], levelCount,
				i = 0, j, k, l, m;

			while (i < count) {
				if (level == 0) {
					pId = -1;
					levelCount = Math.round(Math.random() * max) + min;
					for (j = 0; j < levelCount && i < count; j++, i++) {
						var n = { id: i, pId: pId, name: "Big-" + i };
						nodes.push(n);
						curLevel.push(n);
					}
				} else {
					for (l = 0, m = prevLevel.length; l < m && i < count; l++) {
						pId = prevLevel[l].id;
						levelCount = Math.round(Math.random() * max) + min;
						for (j = 0; j < levelCount && i < count; j++, i++) {
							var n = { id: i, pId: pId, name: "Big-" + i };
							nodes.push(n);
							curLevel.push(n);
						}
					}
				}
				prevLevel = curLevel;
				curLevel = [];
				level++;
			}
			return nodes;
		}

		var ruler = {
			doc: null,
			ruler: null,
			cursor: null,
			minCount: 5000,
			count: 5000,
			stepCount: 500,
			minWidth: 30,
			maxWidth: 215,
			init: function () {
				ruler.doc = $(document);
				ruler.ruler = $("#ruler");
				ruler.cursor = $("#cursor");
				if (ruler.ruler) {
					ruler.ruler.bind("mousedown", ruler.onMouseDown);

				}
			},
			onMouseDown: function (e) {
				ruler.drawRuler(e, true);
				ruler.doc.bind("mousemove", ruler.onMouseMove);
				ruler.doc.bind("mouseup", ruler.onMouseUp);
				ruler.doc.bind("selectstart", ruler.onSelect);
				$("body").css("cursor", "pointer");
			},
			onMouseMove: function (e) {
				ruler.drawRuler(e);
				return false;
			},
			onMouseUp: function (e) {
				$("body").css("cursor", "auto");
				ruler.doc.unbind("mousemove", ruler.onMouseMove);
				ruler.doc.unbind("mouseup", ruler.onMouseUp);
				ruler.doc.unbind("selectstart", ruler.onSelect);
				ruler.drawRuler(e);
			},
			onSelect: function (e) {
				return false;
			},
			getCount: function (end) {
				var start = ruler.ruler.offset().left + 1;
				var c = Math.max((end - start), ruler.minWidth);
				c = Math.min(c, ruler.maxWidth);
				return { width: c, count: (c - ruler.minWidth) * ruler.stepCount + ruler.minCount };
			},
			drawRuler: function (e, animate) {
				var c = ruler.getCount(e.clientX);
				ruler.cursor.stop();
				if ($.browser.msie || !animate) {
					ruler.cursor.css({ width: c.width });
				} else {
					ruler.cursor.animate({ width: c.width }, { duration: "fast", easing: "swing", complete: null });
				}
				ruler.count = c.count;
				ruler.cursor.text(c.count);
			}
		}

		var showNodeCount = 0;
		function onNodeCreated(event, treeId, treeNode) {
			showNodeCount++;
		}

		function createTree() {
			var zNodes = dataMaker(ruler.count);
			showNodeCount = 0;
			$("#treeDemo").empty();
			setting.check.enable = $("#showChk").attr("checked");
			var time1 = new Date();
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			var time2 = new Date();

			console.log("节点共 " + zNodes.length + " 个, 初始化生成 DOM 的节点共 " + showNodeCount + " 个"
				+ "\n\n 初始化 zTree 共耗时: " + (time2.getTime() - time1.getTime()) + " ms");
		}


		$(document).ready(function () {
			ruler.init("ruler");
			$("#createTree").bind("click", createTree); +

				initBibData();

		});

		function initBibData() {
			console.log("......................data...............")
			console.log(bigData)
			var time1 = new Date();
			// setting.check.enable = false;
			let nodes = bigData.data;
			$.fn.zTree.init($("#treeDemo"), setting, nodes);
			fuzzySearch('treeDemo', '#key', null, false); //初始化模糊搜索方法
			var time2 = new Date();

			console.log("节点共 " + nodes.length + " 个, 初始化生成 DOM 的节点共 " + showNodeCount + " 个"
				+ "\n\n 初始化 zTree 共耗时: " + (time2.getTime() - time1.getTime()) + " ms");
		}

	</script>
</head>

<body class="t-body">
	<h1>一次性加载大数据量</h1>
	<h6>[ 文件路径: bigdata/common.html ]</h6>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul>
				<li><span>调整总节点数，测试加载速度：</span>
					<div id="ruler" class="ruler" title="拖拽可调整节点数">
						<div id="cursor" class="cursor">5000</div>
					</div>
					<div style="width:220px; text-align: center;">
						<span>checkbox</span><input type="checkbox" id="showChk" title="是否显示 checkbox"
							class="checkbox first" />&nbsp;&nbsp;&nbsp;&nbsp;
						[ <a id="createTree" href="#" title="初始化 zTree" onclick="return false;">初始化 zTree</a> ]
					</div>
				</li>
			</ul>
			<p>搜索试试看：<br />
				关键字：<input type="text" id="key" value="" class="empty" placeholder="请输入关键字" /><br />
			</p>
			<ul id="treeDemo" class="ztree"></ul>
		</div>

	</div>


</body>

</html>